<template>
		<div>
				<el-row type="flex" justify="center" :gutter="10">
						<el-col :span="8">
								<el-input prefix-icon="el-icon-search" v-model="queryForm.name" @keydown.enter.native="listAllHrs"
																		:clearable="true"></el-input>
						</el-col>
						<el-col :span="4">
								<el-button type="primary" icon="el-icon-search" @click="listAllHrs">搜索</el-button>
						</el-col>
				</el-row>
				<!--用户信息列表-->
				<el-row type="flex" justify="space-around" style="flex-wrap: wrap">
						<el-card class="user-card" v-for="(hr,index) in hrData">
								<div slot="header" class="clearfix">
										<span>{{ hr.name }}</span>
										<el-button style="float: right; padding: 3px 0" type="danger" icon="el-icon-delete"
																					@click="deleteHr(hr)"></el-button>
								</div>
								<el-row class="userinfo-container">
										<el-row type="flex" justify="center" style="margin-bottom: 10px">
												<el-avatar :size="100" :src="hr.userface" class="userinfo-img"></el-avatar>
										</el-row>
										<el-scrollbar style="height: calc(100% - 100px);width:100%">
												<div class="userinfo-text" style="width: 100%;">
														<div>用户名：{{ hr.name }}</div>
														<div>手机号：{{ hr.phone }}</div>
														<div>电话号：{{ hr.telephone }}</div>
														<div>地&#12288;址：{{ hr.address }}</div>
														<div>状&#12288;态：
																<el-switch active-text="启用"
																											inactive-text="禁用" v-model="hr.enabled"
																											@change="updateHr(hr)">

																</el-switch>
														</div>
														<div>角&#12288;色:
																<el-tag size="small" v-for="(role,index) in hr.roles">{{ role.namezh }}</el-tag>

																<el-popover
																				@show="listAllRoles(hr)"
																				@hide="updateHrWithRole(hr)"
																				placement="bottom"
																				title="标题"
																				width="200"
																				trigger="click">
																		<el-select v-model="selectedRole" multiple>
																				<el-option v-for="(role,index) in rolesData" :key="index" :label="role.namezh"
																															:value="role.id"></el-option>
																		</el-select>
																		<el-button size="small" type="text" icon="el-icon-more" slot="reference"></el-button>
																</el-popover>

														</div>
														<div>备&#12288;注:{{ hr.remark }}</div>
												</div>
										</el-scrollbar>
								</el-row>
						</el-card>
				</el-row>
		</div>
</template>

<script>
import Div from "@/views/sys/SysInit";

export default {
		name: "SysHr",
		components: {Div},
		data() {
				return {
						hrData: [],
						rolesData: [],
						selectedRole: [],
						queryForm: {
								name: ''
						}
				}
		},
		mounted() {
				this.init()
		},
		methods: {
				init() {
						this.listAllHrs();
				},

				listAllHrs() {
						this.$get("/system/hr/listAllHrs", this.queryForm).then(res => {
								const {data} = res;
								this.hrData = data;
						})
				},
				// 修改用户
				updateHr(hr) {
						// 删除对象中某个属性
						delete hr.authorities;
						this.$confirm(`确认【${hr.enabled ? '启用' : '禁用'}${hr.name}】?`, '提示').then(res => {
								this.$put("/system/hr/updateHr", hr).then(res => {

								})
						}).catch(error => {
								this.$message.info("取消修改")
								hr.enabled = !hr.enabled
						})
				},

				// 查询所有的角色列表
				listAllRoles(hr) {
						this.$get("/system/hr/listAllRoles").then(res => {
								const {data} = res;
								this.rolesData = data;
								this.selectedRole = hr.roles.map(item => item.id)
								console.log(this.selectedRole)
						}).catch(error => {

						})
				},

				updateHrWithRole(hr) {
						let old = hr.roles.map(item => item.id).sort()
						let newA = [...this.selectedRole]
						newA.sort()
						// arr.join(',') 把数组按照,的方式进行拼接
						if (old.join(',') === newA.join(',')) {
								return false;
						}
						const data = {
								'hrId': hr.id,
								'roleIds': this.selectedRole
						}
						this.$put("/system/hr/updateHrWithRole", data).then(res => {
								const {data} = res;
								this.listAllHrs()
						})
				},

				deleteHr(hr) {
						this.$confirm(`确认永久删除【${hr.name}】吗`).then(res => {
								this.$message.success("删除功能没做!")
						}).catch(error => {
								this.$message.info("取消删除")
						})
				}
		},
}
</script>

<style scoped>
.user-card {
		width: 32%;
}

.userinfo-container {
		height: 300px;
}

.userinfo-img {
		box-shadow: 2px 2px 9px #99a9bf;
}

.userinfo-text {
		font-size: 16px;
		font-family: "Microsoft YaHei";
		color: #74bbeb;
}
</style>
